<script setup>
import { reactive,ref,onMounted,getCurrentInstance }  from 'vue'
import { useRouter } from 'vue-router'
import { encrypt } from '@/utils/encryption'
import { setCookie } from '@/utils/cache' 
const { proxy } = getCurrentInstance()
const { $api } = proxy
const { $loading } = proxy;
$loading().close()
const router = useRouter()
defineProps({
  tenantId: {
      type: [String, Number],
      default: ''
    }
})
const loginForm = reactive({
  username: '',
  password: '',
  code: '',
  uuid: ''
})

const rules = reactive({
    username: [
      { required: true, message: '请输入账号', trigger: ['blur' ,'change'] }
    ],
    password: [
      { required: true, message: '请输入密码', trigger:  ['blur' ,'change'] }
    ],
    code: [
      { required: true, message: '请输入验证码', trigger:  ['blur' ,'change'] }
    ]
  })
const codeIcon = ref('')
const loading = ref(false)
const isCode = ref(false)
const loginFormRef = ref(null)

onMounted(()=>{
  if (import.meta.env.VITE_USER_NODE_ENV === 'development') {
    loginForm['username'] = 'admin'
    loginForm['password'] = 'rq!@#2025'
  }
  getIcon()
  isCode.value = true
})
const submitForm = async ()=>{
  await loginFormRef.value.validate((valid) => {
    if (valid) {
      if(loading.value) return
      
      login()
    }
  })
}

const getIcon = async ()=>{
  const { data } = await $api.user.code()
  codeIcon.value = data.img
  loginForm.uuid = data.uuid
}


  // 登录
   const  login = async  () => {
     loading.value = true
      const params = {
        ...loginForm,
        password: encrypt(loginForm.password),
        grant_type: 'password',
        scope: 'server',
        userType:"00"
      }
      try {
        const {data} = await $api.user.token(params)
        setCookie(import.meta.env.VITE_VUETOKEN_STR, data.accessToken)
        router.push({ path: '/home/index' })
      } catch(e) {
         loading.value = false
        // 更新验证码
        getIcon()
        loginForm.code = ''
      }
    }


</script>
<template>
   <div>
    <el-form  ref="loginFormRef" label-position="top" :model="loginForm" :rules="rules" class="ruleForm" size="small">
      <el-form-item :label="$t('用户名')" prop="username" class="item">
        <el-input
          v-model="loginForm.username"
          size="small"
          clearable
          :placeholder="$t('用户名')"
          prefix-icon="User"
          @keyup.enter.native="submitForm"
        />
      </el-form-item>
      <el-form-item :label="$t('密码')" prop="password" class="item">
        <el-input
          v-model="loginForm.password"
          size="small"
          clearable
          type="password"
          :placeholder="$t('密码')"
          prefix-icon="Key"
          show-password
          @keyup.enter.native="submitForm"
        />
      </el-form-item>
      <el-form-item v-if="isCode" :label="$t('验证码')" prop="code" class="item">
        <el-row style="width: 100%">
          <el-col :span="16">
            <el-input
              v-model="loginForm.code"
              class="checkInp"
              size="small"
              clearable
              type="text"
              :placeholder="$t('验证码')"
              prefix-icon="Lock"
              @keyup.enter.native="submitForm"
            />
          </el-col>
          <el-col :span="8">
            <el-tooltip class="" effect="dark" :content="$t('点击刷新')" placement="top-start">
              <img class="checkImg" :src="'data:image/png;base64,'+codeIcon" @click="getIcon">
            </el-tooltip>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item class="item">
        <el-button type="primary" size="medium" class="sub_btn" :loading="loading" @click="submitForm">{{ $t('立即登录') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
  .ruleForm{
    .item{
      margin: 0;
      margin-top: 10px;
      .sub_btn{
        width: 100%;
        margin-top: 20px;
      }
    }
  }
  :deep(){
    .el-col-8{
      height: 33px;
    }
  }
  .checkImg{
    width: 100px;
    height: 33px;
    margin-left: 15px;
    border-radius: 4px;
    cursor: pointer;
  }
</style>